{% extends 'base.html' %}
{% load static %}
{% load user_tags %}

  {% block title %}
  <title>终端登陆</title>
  {% endblock title %}

	{% block navheader %}
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-1">
          <div class="col-12">
            <ol class="breadcrumb">
              <li class="breadcrumb-item">远程终端</li>
              <li class="breadcrumb-item active">终端登陆</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
	{% endblock navheader %}
	
		  {% block content %}
          <div class="card content-list">
            <div class="card-header">
              <h3 class="card-title">终端登陆</h3>
				<div class="card-tools">
				  <!--button type="button" class="btn btn-tool" data-widget="collapse">
					<i class="fas fa-minus"></i>
				  </button>
				  <button type="button" class="btn btn-tool" data-widget="maximize">
				  <i class="fas fa-expand"></i>
                  </button>
				  <button type="button" class="btn btn-tool" data-widget="remove">
					<i class="fas fa-times"></i>
				  </button-->
				</div>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive">
              <table id="datatables-lists" class="table table-bordered table-hover">
                <thead>
                <tr>
				  <th>名称</th>
				  <th>IP</th>
				  <th>协议</th>
				  <th>端口</th>
				  <th>系统</th>
				  <th>用户</th>
				  <th>
					  操作 
					  {% if request|has_permission:'客户端ssh' or request|has_permission:'客户端sftp' %}
					  <a href="#" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="客户端使用方法见：个人信息 - 编辑">
						<i class="far fa-question-circle"></i>
					  </a>
					  {% endif %}
				  </th>
                </tr>
                </thead>
                <tbody>
				{% for host in hosts %}
                <tr>
				  <td>{{ host.hostname }}</td>
				  <td>{{ host.ip }}</td>
				  <td>
				  {% if host.get_protocol_display == 'ssh' %}
					<span class="badge badge-success">{{ host.get_protocol_display }}</span>
				  {% elif host.get_protocol_display == 'sftp' %}
					<span class="badge badge-info">{{ host.get_protocol_display }}</span>
				  {% elif host.get_protocol_display == 'telnet' %}
					<span class="badge badge-primary">{{ host.get_protocol_display }}</span>
				  {% else %}
				    <span class="badge badge-secondary">{{ host.get_protocol_display }}</span>
				  {% endif %}
				  </td>
				  <td>{{ host.port }}</td>
				  <td>{{ host.release }}</td>
				  {% if host.remote_user %}
				  <td>{{ host.remote_user.username }}</td>
				  {% else %}
				  <td></td>
				  {% endif %}
				  <td>
					{% if host.get_protocol_display == 'ssh' %}
						{% if request|has_permission:'webssh终端' %}
							{% if host.remote_user and host.enabled %}
								<form method="post" action="{% url 'webssh:terminal' %}" target="_blank" style="display:inline;">
									{% csrf_token %}
									<input type="text" name="hostid" value="{{ host.id }}" hidden>
									<button type="submit" class="btn btn-sm btn-success mb-1"><i class="fas fa-terminal"></i> web终端</button>
								</form>
							{% else %}
								<button class="btn btn-sm btn-success disabled mb-1"><i class="fas fa-terminal"></i> web终端</button>
							{% endif %}
						{% endif %}
					{% elif host.get_protocol_display == 'telnet' %}
						{% if request|has_permission:'webtelnet终端' %}
							{% if host.remote_user and host.enabled %}
								<form method="post" action="{% url 'webtelnet:terminal' %}" target="_blank" style="display:inline;">
									{% csrf_token %}
									<input type="text" name="hostid" value="{{ host.id }}" hidden>
									<button type="submit" class="btn btn-sm btn-success mb-1"><i class="fas fa-terminal"></i> web终端</button>
								</form>
							{% else %}
								<button class="btn btn-sm btn-success disabled mb-1"><i class="fas fa-terminal"></i> web终端</button>
							{% endif %}
						{% endif %}
					{% elif host.get_protocol_display == 'rdp' or host.get_protocol_display == 'vnc' %}
						{% if request|has_permission:'webguacamole终端' %}
							{% if host.remote_user and host.enabled %}
								<form method="post" action="{% url 'webguacamole:terminal' %}" target="_blank" style="display:inline;">
									{% csrf_token %}
									<input type="text" name="hostid" value="{{ host.id }}" hidden>
									<button type="submit" class="btn btn-sm btn-success mb-1"><i class="fas fa-desktop"></i> web桌面</button>
								</form>
							{% else %}
								<button class="btn btn-sm btn-success disabled mb-1"><i class="fas fa-desktop"></i> web桌面</button>
							{% endif %}
						{% endif %}
					{% endif %}
					
					&nbsp;&nbsp;
				
					{% if host.get_protocol_display == 'ssh' %}
						{% if host.remote_user and host.enabled %}
							{% if request|has_permission:'客户端ssh' %}
							<form method="post" target="_blank" onsubmit="clishell(this);return false;" style="display:inline;">
								<input type="text" name="hostid" value="{{ host.id }}" hidden>
								<button type="submit" class="btn btn-sm btn-primary mb-1"><i class="fas fa-network-wired"></i> 客户端ssh</button>
							</form>
							{% endif %}
							
							{% if request|has_permission:'客户端sftp' %}
							&nbsp;&nbsp;
							<form method="post" target="_blank" onsubmit="clisftpshell(this);return false;" style="display:inline;">
								<input type="text" name="hostid" value="{{ host.id }}" hidden>
								<button type="submit" class="btn btn-sm btn-info mb-1"><i class="fas fa-network-wired"></i> 客户端sftp</button>
							</form>
							{% endif %}
						{% else %}
							{% if request|has_permission:'客户端ssh' %}
							<button class="btn btn-sm btn-primary disabled mb-1"><i class="fas fa-network-wired"></i> 客户端ssh</button>
							{% endif %}
							
							{% if request|has_permission:'客户端sftp' %}
							&nbsp;&nbsp;
							<button class="btn btn-sm btn-info disabled mb-1"><i class="fas fa-network-wired"></i> 客户端sftp</button>
							{% endif %}
						{% endif %}
					{% endif %}
				  </td>
                </tr>
				{% endfor %}
                </tbody>
                <tfoot>
                <tr>
				  <th>名称</th>
				  <th>IP</th>
				  <th>协议</th>
				  <th>端口</th>
				  <th>系统</th>
				  <th>用户</th>
				  <th>
					  操作 
					  {% if request|has_permission:'客户端ssh' or request|has_permission:'客户端sftp' %}
					  <a href="#" data-container="body" data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="客户端使用方法见：个人信息 - 编辑">
						<i class="far fa-question-circle"></i>
					  </a>
					  {% endif %}
				  </th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
		  {% endblock content %}

{% block js %}
<!-- DataTables -->
<script src="{% static 'adminlte/plugins/datatables/jquery.dataTables.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables/dataTables.bootstrap4.js' %}"></script>
<script>
$("#datatables-lists").DataTable({
	language: {
		"sProcessing": "处理中...",
		"sLengthMenu": "显示 _MENU_ 项结果",
		"sZeroRecords": "没有匹配结果",
		"sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
		"sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
		"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
		"sInfoPostFix": "",
		"sSearch": "搜索:",
		"sUrl": "",
		"sEmptyTable": "无数据",
		"sLoadingRecords": "载入中...",
		"sInfoThousands": ",",
		"oPaginate": {
			"sFirst": "首页",
			"sPrevious": "上页",
			"sNext": "下页",
			"sLast": "末页"
		},
		"oAria": {
			"sSortAscending": ": 以升序排列此列",
			"sSortDescending": ": 以降序排列此列"
		}
	},
	destroy: true,	// 允许重建
	bProcessing:true,  // 表格数据过多处理时显示: sProcessing
	lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
	columnDefs : [ { targets : 6, "orderable" : false } ],
	order: [],
	 //scrollY: 480,	// 滚动条
	 //scrollCollapse: true,
	 //jQueryUI: true,
	 stateSave: true,	// 保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
	 stateDuration: 86400,	// 本地储存(0~更大)还是session储存(-1) 
});
</script>


<script>
	function clishell(event){	// 创建clishell
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 3000;	
		toastr.options.extendedTimeOut = 0;	
		toastr.options.progressBar = true;
		toastr.options.positionClass = 'toast-top-right'; 
		var thisObj = $(event);	//js对象转jquery对象
		var hostid = $(thisObj.find("input[name='hostid']")[0]).val();
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		var url = "{% url 'webssh:terminal_cli' %}";
		$.ajax({
			url: url,
			type: 'POST',
			timeout: 3000,
			async: false,
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				"hostid": hostid,
			},
			error: function(){
				toastr.error('创建ssh客户端终端错误！');
			},
			success: function(ssh_url){
				window.location.href=ssh_url;
			}
		});
	};
	
	function clisftpshell(event){	// 创建clisftpshell
		toastr.options.closeButton = true;
		toastr.options.showMethod = 'slideDown';
		toastr.options.hideMethod = 'fadeOut';
		toastr.options.closeMethod = 'fadeOut';
		toastr.options.timeOut = 3000;	
		toastr.options.extendedTimeOut = 0;	
		toastr.options.progressBar = true;
		toastr.options.positionClass = 'toast-top-right'; 
		var thisObj = $(event);	//js对象转jquery对象
		var hostid = $(thisObj.find("input[name='hostid']")[0]).val();
		csrfmiddlewaretoken = '{{ request.COOKIES.csrftoken }}';
		var url = "{% url 'webssh:terminal_cli_sftp' %}";
		$.ajax({
			url: url,
			type: 'POST',
			timeout: 3000,
			async: false,
			data: {
				'csrfmiddlewaretoken': csrfmiddlewaretoken,
				"hostid": hostid,
			},
			error: function(){
				toastr.error('创建sftp客户端终端错误！');
			},
			success: function(sftp_url){
				window.location.href=sftp_url;
			}
		});
	};
	
	{% if request|has_permission:'客户端ssh' or request|has_permission:'客户端sftp' %}
	$(document).ready(function(){
		$('[data-toggle="popover"]').popover();   
	});
	{% endif %}
	
</script>
{% endblock js %}